<template>
  <div class="voting-info-container">
    <!-- 内容说明 -->
    <div class="section">
      <div class="section-title">内容说明</div>
      <div class="info-row">
        <span class="info-label">组织方</span><span class="info-data">{{voteInfo.initiator ||"-"}}</span></div>
      <div class="info-row"  @click="handlePhone" >
        <span class="info-label"  >联系电话</span>
        <span class="link info-data">{{voteInfo.mobile ||"-"}}</span></div>
      <div class="info-row"><span class="info-label">投票时间</span><span class="info-data">{{dayjs (voteInfo.startDate).format("YYYY-MM-DD HH:mm")}} 至 {{dayjs (voteInfo.endDate).format("YYYY-MM-DD HH:mm")}}</span></div>
      <div class="info-row"><span class="info-label">总面积</span><span>{{ options.sumTotalSize ||"-"}}㎡  </span></div>
      <div class="info-row"><span class="info-label">总人数</span><span>{{options.sumTotalPerson ||"-"}}人</span></div>
      <!-- <div class="info-row"><span class="info-label">房屋建筑面积总和</span><span>10㎡</span></div> -->
    </div>
    <div class="line"></div>
    <!-- 补充信息 -->
    <!-- <div class="section" v-if="voteInfo.remark">
      <div class="section-title">补充信息</div>
      <div class="info-row"><span>

        {{voteInfo.remark}}
        </span></div>
        <div class="line"></div>
    </div> -->


    <div class="section" v-if="voteContent">
      <div class="section-title">投票内容</div>
      <div class="info-row"><span>
        <u-parse :content="voteContent"></u-parse> 
       
        </span></div>
        <div class="line"></div>
    </div>
  
    <!-- 规则说明 -->
    <div class="section">
      <div class="section-title">规则说明</div>
      <div class="rule-block">
        <div class="rule-title">计票规则</div>
        <div class="rule-content">
          未参与表决或弃票，计入已表决的多数票（已表决的业主中选择人数最多的选项），此规则仅在投票数较少时适用（参与人数和总票数均达到2/3），且仅在甲类事项或某项单项与约定事项不符时，不应用于选择类表决事项。
        </div>
      </div>
      <div class="rule-block">
        <div class="rule-title">效力规则</div>
        <div class="rule-content">
          每项表决的票数占比达到2/3的业主人数占比达到2/3的业主参与表决，表决视为有效，此规则不应用于弃票和未表决。
        </div>
      </div>
      <div class="rule-block">
        <div class="rule-title">表决规则</div>
        <div class="rule-content">
          参与表决的业主中超过1/2的业主及超过1/2的有表面积的面积总和，表决才有效。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pmsVoteQuery } from '@/api'
import ls from '@/util/ls.js'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      voteInfo: {},
      options:{
        sumTotalPerson:0,
        sumTotalSize:0
      },
      voteContent:''

    }
  },
  computed:{
    dayjs(){
      return dayjs
    }
  },

  onLoad(options) {
    this.init(options)
  },
  methods: {
    handlePhone(){
      const phone=this.voteInfo.mobile
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    init(options) {
      this.options = options
      pmsVoteQuery({
        voteId: options.voteId
      }).then(res => {
        this.voteInfo=res.data
        this.voteContent=ls.get("voteContent")
      })
    }
  }
}
</script>

<style scoped lang="scss">
.voting-info-container {
  padding: 16px;
  background: #fff;
  font-size: 15px;
  color: #222;
}
.section {
  margin-bottom: 20px;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;

  font-size: 15px;
}
.info-row .link {
  color: #1890ff;
 
}
.rule-block {
  margin-bottom: 10px;
}
.rule-title {
  color: #333333;
  font-weight: bold;
  margin-bottom: 4px;
}
.rule-content {
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}
.info-label{
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    margin-right: 16rpx;
}
.info-data{
  font-size: 26rpx;
}
.line{
  height: 1rpx;
  background: #E5E5E5;
  margin: 20rpx 0;
}
</style>
